JavaScript 读取JSON文件

2024-06-02 05:38| 来源: 网络整理| 查看: 265

JavaScript 读取JSON文件

使用JavaScript读取JSON（JavaScript对象表示法）文件。 JSON 代表JavaScript对象表示法。这意味着文本格式的脚本（可执行）文件，用于存储和传输数据。如果数据是以JSON格式呈现，那么可以轻松处理数据。我们导入的JSON文件可以来自本地服务器或Web API。基本上有三种方法用于执行此任务。

JavaScript fetch()方法：从服务器请求数据，这个请求可以是返回JSON或XML格式数据的任何API类型。 NodeJS require()函数：将文件路径作为函数的唯一参数调用require()函数，Node经历以下步骤：解析和加载封装执行返回输出缓存 JavaScript ES6 import模块：你可以使用import关键字导入变量。你可以从JavaScript文件中指定你想要导入的一个或多个成员。

注意： JavaScript内部支持JSON，因此不需要额外的模块来导入和显示JSON。我们只需要导入JSON文件，可以直接对其进行操纵。

我们将对以下JSON文件进行所有方法的实现：

sample.json

{ "users":[ { "site":"GeeksForGeeks", "user": "Shobhit" } ] }

方法（使用fetch方法）：

创建一个JSON文件并向其中添加数据打开JavaScript文件在fetch方法中传递文件的地址使用.json方法解析文档在控制台显示内容

示例：在这个示例中，我们将实施上述方法。

index.html：这个文件包含了在浏览器上运行程序的script标签。 script.js：这里实现了fetch方法，接收JSON文件并在控制台上显示它。 HTML Document Javascript function Func() { fetch("./sample.json") .then((res) => { return res.json(); }) .then((data) => console.log(data)); }

输出：

JavaScript 读取JSON文件

使用require模块的方法：

按照之前的方法创建JSON文件。创建一个script.js并使用Node的require方法导入JSON文件。将数据打印到控制台上。

注意：我们将在控制台上使用Node运行程序，而不是在浏览器上运行。请确保你至少使用Node版本17.0。

script.js

Javascript const sample = require('./sample.json'); console.log(sample);

运行该应用的步骤：

在终端中打开当前文件夹，然后输入以下命令。

node script.js

输出:

{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }

方法（使用导入模块）：

根据前面的示例创建JSON文件。创建script.js文件并导入JSON文件。 Javascript import user from "./sample.json" assert { type: 'json' };; console.log(user)

运行应用程序的步骤：

在终端中打开当前文件夹，并输入以下命令。

node script.js

输出：

{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }

【本文地址】

公司简介

联系我们